<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card header="<i class='fa fa-align-justify'></i> 新闻列表">
          <div class="search-box">
            <b-button variant="outline-primary" @click="addNews()">添加新闻</b-button>
          </div>
          <div class="search-box">
            <div prop="beginDateBefore">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                :editable="false"
                v-model="dateForm.startDate"
                format="yy-MM-dd"
                :picker-options="pickerBeginDateBefore">
              </el-date-picker>
            </div>
            <div style="padding:0 5px;">至</div>
            <div prop="beginDateAfter">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                :editable="false"
                v-model="dateForm.endDate"
                format="yy-MM-dd"
                :picker-options="pickerBeginDateAfter">
              </el-date-picker>
            </div>

            <b-button variant="outline-primary" @click="searchNews()" class="btn-search">搜索</b-button>
          </div>
          <table class="table table-striped">
            <thead>
            <tr>
              <th>序号</th>
              <th>新闻名称</th>
              <th>新闻时间</th>
              <th>新闻类型</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td colspan="5" v-show="isNews" style="text-align: center;">没有搜索到匹配的信息</td>
            </tr>
            <tr  v-for="(item, index) in currentData">
              <td>{{ index + 1 + number }}</td>
              <td>{{ item.title.substring(0, 20) }}</td>
              <td>{{ item.createtime }}</td>
              <td>{{ item.type }}</td>
              <td>
                <span class="badge badge-success" @click="findNewsDetail(item.id)">详情</span>
                <span class="badge badge-success" @click="editNewsDetail(item.id)">编辑</span>
                <span class="badge badge-danger" @click="delNewsList(item.id)">删除</span>
              </td>
            </tr>
            </tbody>
          </table>

          <el-pagination
            layout="prev, pager, next"
            :current-page.sync="current"
            :page-size="10"
            :total="total">
          </el-pagination>

        </b-card>
      </div>
    </div>
    <div title="Modal title" class="modal-primary" v-model="primaryModal" v-show="primaryModal">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title">新闻信息</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelDel">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body">
                <br>是否删除该条新闻信息？<br><br>
              </div>
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelDel()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="sureDel()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div>
  </div>
</template>

<script>
  import { selectAllNews, selectTimeNews, deleteNews } from '../service/api'
  import _ from 'lodash'
  export default {
    name: 'tables',
    data () {
      return {
        delId: '',
        current: 1,
        number: 0,
        datas: [],
        primaryModal: false,
        isNews: false,
        startDate: '',
        endDate: '',
        modalOpen: false,
        pageNumber: '',
        dateForm: {
          startDate: '',
          endDate: ''
        },
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        pickerBeginDateAfter: {
          disabledDate: (time) => {
            // return time.getTime() > Date.now()
            let beginDateVal = this.dateForm.startDate
            if (beginDateVal) {
              return time.getTime() < beginDateVal
            }
          }
        }
      }
    },
    computed: {
      currentData () {
        return this.datas[this.current - 1]
      },
      total () {
        return ~~this.pageNumber
      }
    },
    methods: {
      // 编辑新闻信息
      editNewsDetail (index) {
        this.$router.push({
          path: '/news/news_detail?flag=1&id=' + index
        })
      },
      // 查看新闻详情
      findNewsDetail (index) {
        this.$router.push({
          path: '/news/news_detail?flag=3&id=' + index
        })
      },
      // 删除新闻信息
      delNewsList (index) {
        this.modalOpen = true
        this.primaryModal = true
        this.delId = index
        // deleteNews({id: index})
        // .then(({ data, err }) => {
        // console.log('err: ' + err)
        // console.log('data: ' + data)
        // if (data.code === 200) {
        // // alert('删除成功')
        // // 页面刷新
        // location.reload()
        // }
        // })
      },
      cancelDel () {
        this.modalOpen = false
        this.primaryModal = false
      },
      sureDel () {
        this.modalOpen = false
        this.primaryModal = false
        deleteNews({id: this.delId})
          .then(({ data, err }) => {
            if (data.code === 200) {
              // 页面刷新
              // location.reload()
              this.fetchNewsList()
            }
          })
      },
      // 添加新闻信息
      addNews () {
        this.$router.push({
          path: '/news/news_detail?flag=2'
        })
      },
      // 搜索新闻信息
      formatDate (date) {
        let times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
        if (parseInt(date.getMonth() + 1) < 10) {
          times = date.getFullYear() + '-0' + (date.getMonth() + 1) + '-' + date.getDate()
        }
        if (date.getDate() < 10) {
          times = date.getFullYear() + '-' + (date.getMonth() + 1) + '-0' + date.getDate()
        }
        if (parseInt(date.getMonth() + 1) < 10 && date.getDate() < 10) {
          times = date.getFullYear() + '-0' + (date.getMonth() + 1) + '-0' + date.getDate()
        }
        return times
      },
      searchNews () {
        if (this.dateForm.startDate !== '' && this.dateForm.endDate !== '') {
          let sdate = this.formatDate(this.dateForm.startDate)
          let edate = this.formatDate(this.dateForm.endDate)
          selectTimeNews({startDate: sdate, endDate: edate})
            .then(({ data, err }) => {
              if (data.code === 200) {
                this.datas = _.chunk(data.result, 10)
                this.current = 1
                this.pageNumber = data.result.length
                if (data.result.length === 0) {
                  this.isNews = true
                } else {
                  this.isNews = false
                }
              }
            })
        } else {
          alert('请选择需要搜索的时间范围！')
        }
      },
      handleCurrentChange () {
        if (this.current === 1) {
          this.number = 0
        } else {
          this.number = (this.current - 1) * 10
        }
      },
      /* fetch 新闻列表 */
      fetchNewsList () {
        // fetch
        selectAllNews()
          .then(({ data, err }) => {
            if (data.code === 200) {
              this.datas = _.chunk(data.result, 10)
              this.pageNumber = data.result.length
              if (data.result.length === 0) {
                this.isNews = true
              } else {
                this.isNews = false
              }
            }
          })
      }
    },
    created () {
      this.fetchNewsList()
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" >
  @import "../styles/common";
  .search-box div{
    display: inline-block;
    line-height: 36px;
    height: 36px;
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: auto;
  }
  .el-input__inner {
    height: 35px;
  }
  /*.search-info {*/
    /*margin-left: 15px;*/
    /*width: 250px;*/
  /*}*/
  .data-time{
    width: auto;
    height:35px;
  }
  @media screen and (max-width: 767px){
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 130px;
    }
    .el-input--suffix .el-input__inner {
      padding-right: 5px;
    }
    .search-box div{
      margin-bottom: 5px;
    }
  }
</style>
